<template>
  <div class="e-map" ref="e-map"></div>
</template>

<script>
export default {
  name: "e-map",
  data() {
    return {
      echarts: null,
      resizeTimer: null,
    };
  },
  methods: {
    async initEchart() {
      this.echarts = this.$echarts.init(this.$refs["e-map"]);
      let geoJson = await axios.get("/static/china_data.json", {
        noApped: true,
      });
      this.$echarts.registerMap("china", geoJson.data);
      var data = geoJson.data.features.map((item) => ({
        name: item.properties.name,
        value: 800 + Math.ceil(Math.random() * 32000),
      }));
      this.echarts.setOption({
        // 地图标题
        title: {
          text: "既有店全国分布图",
        },
        // 提示组件框
        tooltip: {
          trigger: "item",
          formatter: ({ name, value }) => {
            return `
              <div
                <p>
                  <span>城市:</span>
                  <span>${name}</span>
                </p>
                <p>
                  <span>value:</span>
                  <span>${value}</span>
                </p>
              </div>
            `;
          },
        },
        // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        // 区域范围选择
        visualMap: {
          show: false,
          min: 800,
          max: 50000,
          text: ["50000", "800"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ffffff", "#b5d0fa", "#1862ed"],
          },
          pieces: [
            {
              gt: 3,
              label: "已开发",
              color: "#134B1C",
            },
            {
              gte: 1,
              lte: 1,
              label: "开发中",
              color: "#4A4003",
            },
            {
              gte: 0,
              lte: 0,
              label: "未开发",
              color: "#00336C",
            },
          ],
        },
        // 地图配置项
        series: [
          {
            map: "china",
            zoom: 1.2,
            type: "map",
            aspectScale: 0.8,
            selectedMode: "single",
            hoverable: false,
            roam: true,
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#99999",
                label: {
                  show: false,
                },
              },
              emphasis: {
                areaColor: "#1560e1",
                borderWidth: 2,
                borderColor: "#99999",
                borderType: "dashed",
                label: {
                  show: false,
                },
              },
            },
            data,
          },
        ],
      });
      window.addEventListener("resize", () => {
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer);
        }
        this.resizeTimer = setTimeout(() => {
          this.echarts.resize();
        }, 400);
      });
      this.echarts.on("click", (e) => {
        console.log(e);
      });
    },
  },
  mounted() {
    this.initEchart();
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.echarts.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.e-map {
  width: 100%;
  height: 100%;
}
</style>